<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4"><el-input v-model="form.title" placeholder="请输入名称" size="small"></el-input></el-col>
      <el-col :span="4">
        <el-select v-model="form.type" placeholder="请选择全部测评类型" size="small">
          <el-option v-for="item in selection" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <el-row v-if="this.menuList.includes('addGauge')" class="btnBox">
      <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addStudentsScale">添加学生量表</el-button></el-col>
    </el-row>
    <div class="table">
      <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="operation"></simple-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
    <el-dialog title="详细介绍" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false'>
      <span>{{this.surveyls_description}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import {APIGAUGEGETGAUGELIST, APIGAUGEGETEVALUATIONTYPELIST} from '@/common/api.js'
export default {
  components: {
    simpleTable
  },
  data () {
    return {
      dialogVisible: false,
      surveyls_description: '',
      form: {},
      selection: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'surveyls_title', name: '名称'},
          // {id: '', name: '测评量表数量'},
          {id: 'topics_num', name: '题量'},
          {id: 'duration', name: '预计用时'},
          {id: 'type_title', name: '测评类型'},
          {id: 'is_show_title', name: '状态'}
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    var operation = {id: 'operation', name: '操作', list: []}
    if (this.menuList.includes('detilGauge')) {
      var operation1 = {id: 'viewRole', name: '详细介绍'}
      operation.list.push(operation1)
    }
    if (this.menuList.includes('editGauge')) {
      var operation2 = {id: 'edit', name: '编辑'}
      operation.list.push(operation2)
    }
    this.tableConfig.config.push(operation)
    this.tableList()
    this.selectionFn()
  },
  methods: {
    selectionFn () {
      APIGAUGEGETEVALUATIONTYPELIST().then((res) => {
        this.selection = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    tableList () {
      this.form.page = this.page
      this.form.limit = this.limit
      this.form.platform_type = 1 // 1是学生2是家长
      APIGAUGEGETGAUGELIST(this.form).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    operation (val) {
      if (val.id === 'edit') {
        this.$router.push({path: './editStudentsScale', query: {id: val.rows.id}})
      } else if (val.id === 'viewRole') {
        this.dialogVisible = true
        this.surveyls_description = val.rows.surveyls_description
      }
    },
    addStudentsScale () {
      this.$router.push({path: './addStudentsScale'})
    }
  }
}
</script>
